<template>
	<view
		style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #f7f7f7;display: flex;flex-direction: column;">
		<view style="flex: 1;overflow: hidden;">
			<scroll-view scroll-y="true" style="height: 100%;width: 100%;" :show-scrollbar="true">
				<view v-if="addressList.length == 0">
					暂无收货地址~
				</view>
				<view v-else>
					<view v-for="item in addressList" :key="item.id" @click="editClick(item)"
						style="padding: 10px;box-sizing: border-box;display: flex;flex-direction: column;background-color: #FFFFFF;margin-bottom: 10px;">
						<view
							style="display: flex; flex-direction: column;border-bottom: 1px solid #F1F1F1;padding-bottom: 10px;">
							<view style="font-weight: bold;margin-bottom: 5px;">收货人：{{item.name}} {{item.phoneNumber}}
							</view>
							<view>收货地址：{{item.address}}</view>
						</view>
						<view
							style="display: flex;align-items: center;margin-top: 10px;font-size: 14px;color: #606266;">
							<view>
								<u-checkbox-group v-model="item.defaultAddress" placement="row" @change="checkboxChange(item)">
									<u-checkbox label="设置默认" :name="1"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view style="flex: 1;"></view>
							<view style="display: flex;align-items: center;margin-right: 15px;" >
								<u-icon name="arrow-right-double" color="#606266" size="14"></u-icon>
								<view style="margin-left: 3px;">编辑</view>
							</view>
							<view style="display: flex;align-items: center;" @click.stop="deleteClick(item)">
								<u-icon name="trash" color="#606266" size="14"></u-icon>
								<view style="margin-left: 3px;">删除</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view
			style="flex-basis: 60px;display: flex;align-items: center;padding: 10px;box-sizing: border-box;background-color: #FFFFFF;box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);">
			<u-button type="primary" shape="circle" text="添加新地址" @click="addAddress"></u-button>
			<u-popup :show="show" @close="close" :round="10">
				<view style="padding: 15px;box-sizing: border-box;">
					<view style="text-align: center;font-weight: bold;">{{title}}</view>
					<u--form labelPosition="left" :labelWidth="80" :model="addressInfo" :rules="rules" ref="form1">
						<u-form-item label="姓名" prop="name" borderBottom>
							<u--input v-model="addressInfo.name" border="none" placeholder="请填写姓名"></u--input>
						</u-form-item>
						<u-form-item label="联系电话" prop="phoneNumber" borderBottom>
							<u--input v-model="addressInfo.phoneNumber" border="none" placeholder="请填写电话号码"></u--input>
						</u-form-item>
						<u-form-item label="学校地址" prop="address" borderBottom>
							<u--input v-model="addressInfo.address" border="none" placeholder="请填写地址"></u--input>
						</u-form-item>
					</u--form>
					<view style="margin: 10px 0 15px 0;">
						<u-checkbox-group v-model="addressInfo.defaultAddress" placement="row">
							<u-checkbox label="设置为默认地址" :name="1"></u-checkbox>
						</u-checkbox-group>
					</view>
					<u-button type="primary" shape="circle" text="立刻保存" @click="submit"></u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				addressList: [],
				addressInfo: {
					name: "",
					phoneNumber: "",
					address: "",
					defaultAddress: []
				},
				rules: {
					name: [{
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						},
						{
							min: 1,
							max: 11,
							message: '长度在1-11个字符之间'
						},
					],
					phoneNumber: [{
							type: 'string',
							required: true,
							message: '请填写电话号码',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '手机号码格式不正确'
						}
					],
					address: {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
				},
				title: "",
			}
		},
		onShow() {
			// console.log("show")
			this.getAllAddress()
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			addAddress() {
				this.title = "新增收货地址"
				this.show = true
			},
			close() {
				this.$refs.form1.clearValidate();
				this.addressInfo = {
					name: "",
					phoneNumber: "",
					address: "",
					defaultAddress: []
				},
				this.show = false
			},
			getAllAddress() {
				this.$http("/address/getAllAddress", "GET", null).then(res => {
					this.addressList = res.data.data.map(value => {
						value.defaultAddress = value.defaultAddress == 1? [value.defaultAddress]:[]
						return value
					})
				})
			},
			submit() {
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过')
					uni.showLoading({
					    title: '提交中'
					});
					let data = JSON.parse(JSON.stringify(this.addressInfo));
					data.defaultAddress = data.defaultAddress[0] || 0;
					if(this.title == "新增收货地址"){
						this.$http("/address/addAddress", "POST", data).then(() => {
							this.getAllAddress();
							this.close();
							uni.hideLoading();
						})
					}else{
						this.$http("/address/updateAddress", "POST", data).then(() => {
							this.getAllAddress();
							this.close();
							uni.hideLoading();
						})
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			checkboxChange(item) {
				uni.showLoading({
				    title: '修改中'
				});
				this.$nextTick(function(){
					let data = {id:item.id,defaultAddress:item.defaultAddress[0] || 0}
					// console.log(data)
					this.$http("/address/updateDefaultAddressById","GET",data).then(()=>{
						this.getAllAddress();
						uni.hideLoading();
					})
				})	
			},
			editClick(item) {
				console.log(item)
				this.addressInfo = JSON.parse(JSON.stringify(item))
				this.title = "编辑收货地址"
				this.show = true
			},
			deleteClick(item) {
				console.log(item)
				uni.showModal({
				    title: '提示',
				    content: '是否删除？',
				    success: res => {
				        if (res.confirm) {
				            // console.log('用户点击确定');
							this.$http("/address/deleteAddress", "GET", {id:item.id}).then(() => {
								this.getAllAddress();
							})
				        }
				    }
				});
			},
		}
	}
</script>

<style>
</style>
